<template>
  <div class="guide">
    <Dao :time="8" :onFinish="onFinish"></Dao>
    <div class="swipebox">
      <van-swipe
        @change="onChange"
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item v-for="(item, index) in banners" :key="index">
          <img class="g-img" :src="item.goods_image" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="btns" v-if="current == banners.length - 1">
      <van-button
        @click="gotopage('/shop')"
        block
        :type="flag ? 'primary' : 'danger'"
        round
        >去购物</van-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getBannerApi } from "../../api/api";
import { useCommon, useToggle } from "../../hooks/common";
import { useDraggable, useNetwork } from "@vueuse/core";
import VueCookies from "vue-cookies";

const { gotopage } = useCommon();

const [flag, dotoggle] = useToggle();
const banners = ref([]);
const current = ref(0);
const nets = useNetwork();

const onChange = (index: any) => {
  console.log(index);
  current.value = index;
};
const getBannerData = async () => {
  let res: any = await getBannerApi();
  console.log(res);
  banners.value = res.data.list.data.slice(0, 3);
};
const onFinish = () => {
  gotopage("/shop");
};

onMounted(() => {
  console.log(VueCookies);
  if (VueCookies.get("hasvisit")) {
    gotopage("/shop");
  } else {
    getBannerData();
    VueCookies.set("hasvisit", "wh2309", 7 * 24 * 60 * 60);
  }
});
</script>

<style lang="scss" scoped>
.guide {
  width: 100%;
  height: 100%;
  .btns {
    width: 100%;
    margin-top: 50px;
    padding: 0 70px;
  }
}
.swipebox {
  width: 100%;
  height: 70%;
  .g-img {
    width: 100%;
    height: 70vh;
  }
}
</style>